<template>
  <div style="padding: 20px">
    <Alert message="标签示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
      <template #description>
        <div>组件属性：</div>
        <div>size: 标签大小(50,40,36,28,20)</div>
        <div>type: url,icon,http</div>
        <div>color: 背景颜色</div>
        <div>shape: circle(圆角) square(方形) </div>
      </template>
    </Alert>
    <div class="demoTittle">基础用法(avatar)</div>
    <div class="demoTittle2">- 头像的形状和大小</div>
    <div class="demoTittle2">- 大小分为：50px,40px,36px,28px,20px</div>
    <a-space direction="vertical" :size="32">
      <a-space wrap :size="20">
        <a-avatar style="background-color: #2570e8" :size="50">
          <template #icon><UserOutlined /></template>
        </a-avatar>
        <a-avatar style="background-color: #2570e8" :size="40">
          <template #icon><UserOutlined /></template>
        </a-avatar>
        <a-avatar style="background-color: #2570e8" :size="36">
          <template #icon><UserOutlined /></template>
        </a-avatar>
        <a-avatar style="background-color: #2570e8" :size="28">
          <template #icon><UserOutlined /></template>
        </a-avatar>
        <a-avatar style="background-color: #2570e8" :size="20">
          <template #icon><UserOutlined /></template>
        </a-avatar>
      </a-space>

      <a-space wrap :size="20">
        <a-avatar style="background-color: #e8effe" shape="square" :size="50">
          <template #icon><UserOutlined /></template>
        </a-avatar>
        <a-avatar style="background-color: #e8effe" shape="square" :size="40">
          <template #icon><UserOutlined /></template>
        </a-avatar>
        <a-avatar style="background-color: #e8effe" shape="square" :size="36">
          <template #icon><UserOutlined /></template>
        </a-avatar>
        <a-avatar style="background-color: #e8effe" shape="square" :size="28">
          <template #icon><UserOutlined /></template>
        </a-avatar>
        <a-avatar style="background-color: #e8effe" shape="square" :size="20">
          <template #icon><UserOutlined /></template>
        </a-avatar>
      </a-space>
    </a-space>
    <div style="height: 20px"></div>
    <div class="demoTittle">展示类型</div>
    <div class="demoTittle2">- 支持三种类型：图标、图片、在线链接</div>
    <a-space direction="vertical" :size="32">
      <a-space wrap :size="20">
        <img src="@/assets/image/user1.png" width="40" />
        <img src="@/assets/image/user2.png" width="40" />
        <a-avatar style="background-color: #2570e8" :size="40">
          <template #icon><UserOutlined /></template>
        </a-avatar>
        <img src="@/assets/image/user3.png" width="40" />
      </a-space>
    </a-space>
    <div style="height: 20px"></div>
    <div class="demoTittle">头像组合展现(avatar-group)</div>
    <a-avatar-group
      :max-count="2"
      :max-style="{ color: '#fff', backgroundColor: '#A0BFF2' }"
      :size="40"
    >
      <a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" size="large" />
      <a-avatar style="background-color: #1890ff" :size="40">K</a-avatar>
      <a-tooltip title="Ant User" placement="top" :size="40">
        <a-avatar style="background-color: #87d068">
          <template #icon><UserOutlined /></template>
        </a-avatar>
      </a-tooltip>
      <a-avatar style="background-color: #1890ff" :size="40">
        <template #icon><AntDesignOutlined /></template>
      </a-avatar>
    </a-avatar-group>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import { UserOutlined } from '@ant-design/icons-vue';
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    color: #494a4a;
    font-size: 14px;
    margin-bottom: 18px;
  }
</style>
